<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>热力图</title>
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
    <link rel="stylesheet" href="//minedata.cn/minemapapi/v1.3/minemap.css">
    <script src="//minedata.cn/minemapapi/v1.3/minemap.js"></script>
    <script src="//minedata.cn/minemapapi/v1.3/plugins/template/template.js"></script>
    <style>
        html,
        body,
        #map {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
        }
    </style>
</head>

<body>
    <div id="map">
    </div>

    <script>
        minemap.domainUrl = '//minedata.cn';
        minemap.spriteUrl = '//minedata.cn/minemapapi/v1.3/sprite/sprite';
        minemap.serviceUrl = '//minedata.cn/service';
        minemap.accessToken = '2954ebbe7a1743eaad3d99d4855a2fb7';
        minemap.solution = 4192;
        var map = new minemap.Map({
            container: 'map',
            style: '//minedata.cn/service/solu/style/id/4192',
            center: [121.476610, 31.227467],
            zoom: 12,
            pitch: 0
        });
        map.on('load', function () {
            minemap.util.getJSON('./output.json', function (error, data) {
                var geojson = {
                    "type": "FeatureCollection",
                    "features": []
                };
                for(let i in data) {
                    geojson.features.push({
                        "geometry": {
                            "type": "Polygon",
                            "coordinates": [[[data[i].ltLng, data[i].ltLat], [data[i].ltLng, data[i].rbLat], [data[i].rbLng, data[i].rbLat], [data[i].rbLng, data[i].ltLat], [data[i].ltLng, data[i].ltLat]]]
                        },
                        "properties": {
                            "name": i
                        }
                    });
                }

                console.log(geojson);
                map.addSource("polygen", {
                    "type": "geojson",
                    'data': geojson
                });

                map.addLayer({
                    "id": "polylayer",
                    "maxzoom": 19,
                    "source": "polygen",
                    "layout": {
                        "visibility": "visible"
                    },
                    "paint": {
                        "fill-color": "#0072E3",
                        "fill-opacity": 0.8,
                        "fill-outline-color": "#ff0000"
                    },
                    "minzoom": 1,
                    "type": "fill"
                });

                map.addLayer({
                    "id": "symbol",
                    "type": "symbol",
                    'source': 'polygen',
                    "layout": {
                        "text-field": "{name}",
                        "text-size": 10,
                        "text-allow-overlap": true,
                        "icon-allow-overlap": true,
                    },
                    "paint": {
                        "text-halo-width": 1.0,
                        "text-color": "#cccccc"
                    },
                    "minzoom": 6,
                    "maxzoom": 17,
                });

                var el = document.createElement('div');
                el.id = 'marker';
                el.style["background-image"] = "url(\'//minedata.cn/minemapapi/demo/images/police.png\')";
                el.style["background-size"] = "cover";
                el.style.width = "50px";
                el.style.height = "50px";
                el.style["border-radius"] = "50%";
                el.style.cursor = "pointer";
                var el1 = document.createElement('div');
                el1.id = 'marker';
                el1.style["background-image"] = "url(\'//minedata.cn/minemapapi/demo/images/police.png\')";
                el1.style["background-size"] = "cover";
                el1.style.width = "50px";
                el1.style.height = "50px";
                el1.style["border-radius"] = "50%";
                el1.style.cursor = "pointer";

                var marker = new minemap.Marker(el, { offset: [0, 0] })
                    .setLngLat([121.514141, 31.216995]).addTo(map);

                var marker1 = new minemap.Marker(el1, { offset: [0, 0] })
                    .setLngLat([121.539639, 31.233789]).addTo(map);

            });


            map.on('click', function (e) {
                var features = map.queryRenderedFeatures(e.point);
                console.log(features, e.lngLat);
            });
        });
    </script>
</body>

</html>